<template>
    <div class="page-wrap page-wrap-ql" v-loading="loading">
        <div class="page-cont" v-if="detailData">
            <product-header :detail="detailData" @success="getDetailData" />
            <a-tabs v-model:activeKey="activeKey" :animated="false">
                <a-tab-pane :tab="item.name" v-for="(item, index) of tabArr" :key="index">
                    <component :is="item.comName" :detail="detailData" @success="getDetailData" />
                </a-tab-pane>
            </a-tabs>
        </div>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import { message } from 'ant-design-vue';
import { ProfileTab, AnalysisTab, CostTab, VersionTab, JiraIssueTab } from '@/views/productAnalysis/productDetail/allTab';
import ProductHeader from '@/views/productAnalysis/productDetail/components/ProductHeader.vue';
import { useRoute } from 'vue-router';
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
    components: {
        ProfileTab,
        AnalysisTab,
        CostTab,
        VersionTab,
        ProductHeader,
        JiraIssueTab
    },
    setup() {
        const route = useRoute();
        const state = reactive({
            activeKey: 0,
            rules: {},
            tabArr: [
                // { name: '需求概况', comName: 'ProfileTab' },
                { name: '产品分析', comName: 'AnalysisTab' },
                { name: '成本', comName: 'CostTab' },
                { name: '版本与资产', comName: 'VersionTab' }
                // { name: 'Jira Issue', comName: 'JiraIssueTab' },
            ],
            loading: false,
            detailData: null
        });
        const getDetailData = async () => {
            state.loading = true;
            const query = {
                id: route.query.id
            };
            const { success, moule, errorMsg } = await api.productDetailModel.findById(query);
            if (success) {
                state.detailData = { ...moule };
            } else {
                message.error(errorMsg);
            }
            state.loading = false;
        };
        getDetailData();
        if (route.query.tab) {
            const tab = Number(route.query.tab);
            if (!Number.isNaN(tab)) {
                state.activeKey = tab;
            }
        }
        return {
            ...toRefs(state),
            getDetailData
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    height: 100%;
    position: relative;
    .page-cont {
        min-height: 516px;
        background: #fff;
    }
}
::v-deep(.ant-tabs-top-content) {
    background: #f0f2f5 !important;
}
::v-deep(.ant-tabs-bar) {
    margin-bottom: none;
    margin: 0;
}
</style>